<template>
  <div>
    <!-- joint  为自定义的过滤器-->
    <p>单价<span class="price">{{ price|joint }}</span></p>
    数量：<input type="number" v-model="goodsNum"/>
    <p>总价：<span class="price">{{ allPrice|joint }}</span></p>
    <hr>
    <!-- toUpperCase   getString  为自定义的过滤器-->
    <p>小写转换大写：过滤前：{{msg}} 过滤后： {{msg|toUpperCase}}</p>
    <p>去除数字：过滤前：{{msg2}} 过滤后： {{msg2|getString}}</p>
  </div>
</template>

<script>
export default {
  name: "compute-filter",
  data() {
    return {
      goodsNum: 1,
      price: 199,
      msg:'w32e1r32qw1r',
      msg2:'w32e1r32qw1r',
    }
  },
  computed: {
    allPrice: function () {
      console.log(this.goodsNum * this.price)
      return this.goodsNum * this.price;
    },
  },
  // filters 过滤器选项
  filters: {
    //joint 定义￥拼接过滤器
    joint: function (price) {
      return '￥' + price;
    },
    //toUpperCase 定义一个字符串转大写的过滤器
    toUpperCase: function (val) {
      return val.toUpperCase();
    },
    //getString 定义一个获取去除数字的过滤器
    getString: function (val) {
      let newVal = '';
      val.split('').map(function (item) {
        if (9 >= item && item >= 0) {
          return;
        } else {
          return (newVal += item);
        }
      });
      return newVal;
    },
  },
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.price {
  font-size: 22px;
  color: brown;
}
</style>
